<template>
  <div class="login">
    <van-nav-bar left-arrow @click-left="onClickLeft" />
    <h1>登录</h1>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        label="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <span class="code">
      <a href>验证码登录</a>
    </span>
    <router-link to="/Register">
      <span class="register">
        <a href>新用户注册</a>
      </span>
    </router-link>
    <van-divider class="other" dashed>选择其它方式登录</van-divider>
    <div class="icon">
      <a href class="weixin"></a>
      <a href class="weibo"></a>
    </div>
  </div>
</template>

<script>
import {userLogin} from '../api/userApi'
export default {
  data() {
    return {
      username: "",
      password: ""
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/home/profile");
    },

    async onSubmit(values){
      let res = await userLogin(values)
      console.log(res);
      if(res.data.code == 1){
        let uInfo =JSON.stringify(res.data.data) 
        localStorage.setItem('userInfo',uInfo)
        this.$router.push("/");
      }
    }
    
  }
};
</script>

<style lang="stylus" scoped>
.login {
}

h1 {
  font-size: 25px;
  position: relative;
  line-height: 80px;
  left: 20px;
}

.code {
  float: left;
  margin-left: 20px;
}

.register {
  float: right;
  margin-right: 20px;
}

.code, .register {
  margin-top: 15px;
}

.other {
  clear: both;
  margin-top: 150px;
}

.icon {
  padding: 20px 0;
  text-align: center;
}

.icon a.weixin {
  background: url('https://m.miabaobei.com/resources/img/weixin.png') no-repeat; // m.miabaobei.com/resources/img/weixin.png) no-repeat;
  background-size: cover;
  margin-right: 80px;
  width: 32px;
  height: 32px;
  display: inline-block;
}

.icon a.weibo {
  background: url('https://m.miabaobei.com/resources/img/weibo.png') no-repeat; // m.miabaobei.com/resources/img/weibo.png) no-repeat;
  background-size: cover;
  width: 32px;
  height: 32px;
  display: inline-block;
}
</style>